﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Get Json data by JQuery</title>
    <script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" >
        var persons;

        $(function () {
            $("#list").html("");
            $.get(
            "../Json/jsonData.ashx",
            { name: 'Test', age: 24 },
            ParseJsonData);
        });

        function getData() {
            $("#grid tbody").html("");
            $.each(persons, function (i) {
                $("#grid").append("<tr><td>" + persons[i].Name + "</td><td>" + persons[i].Address.State + "</td></tr>");
            });
        }

        function ParseJsonData(json) {
            persons = $.parseJSON(json);
        }
    </script>
</head>
<body>
    <input id="jsonTrigger" type="button" value="GetJsonData" onclick="javascript:getData()" />
    <ul id="list"></ul>
    <table id="grid" style="width: 100%;">
        <thead>
            <tr><td>Name</td><td>State</td></tr>
        </thead>
    </table>
</body>
</html>
